<template>
    <div class="product-all" >
        <div class="product-swiper">
            <mt-swipe :auto="4000" >
                <mt-swipe-item 
                    v-for="(item,index) in pro.photo" 
                    :key="index"
                ><img :src="item.url" /></mt-swipe-item>
               
            </mt-swipe>
        </div>
        <div>
                <p>{{pro.title}}</p>
                <p class="price-t">￥{{pro.price}}</p>
        </div>
        <div>
            <img 
            class="descContentList-img"
             v-for="(item,index) in list" 
             :key="index"
             :src="item.photo.url" 
             />
        </div>
        <div class="all-cart"
        @click="addToCart"

        >加入购物车</div>
</div>
   
      
      
</template>

<script>
import { Swipe, SwipeItem } from 'mint-ui';

export default {
    
    props:['product'],
    data(){
        return {
            pro:{}
        }
    },
    methods:{
        addToCart(){
            console.log('ss')
            const {id,title,price,image} = this.pro
          const aa = {id,title,price,image,'count':1,'isCheck':false}
         console.log(aa)
          this.$store.commit('addToCart', aa)
        }
    },
   
    components:{
        'mt-swipe':Swipe,
        'mt-swipe-item':SwipeItem
    },
        computed:{
           list(){
               return this.pro.descContentList?this.pro.descContentList.slice(1):[]
           } 
      },
       
created(){
    console.log(this)
    console.log(this.$route.params.product)
        this.$http.get(`http://www.xiongmaoyouxuan.com/api/detail?id=${this.$route.params.product}&normal=1&sa=`)
            .then(resp=>{
                console.log(resp.data.data.detail)
                this.pro=resp.data.data.detail
               
           
            })
          
       
},
    
   
}
</script>

<style lang="scss" scoped>
.product-all{
    height: 100%;
    overflow-x: hidden;
}
.product-swiper{
    height:375px;
    border: 1px solid red;
}
.descContentList-img{
    height: 700px;
    width:400px;
}
.price-t{
        color: #fa585a;
    font-size: 18px;
    font-weight: 700;
    padding: 10px;
}
.all-cart{
    position: fixed;
    height: 56px;
    bottom: 56px;
    left: 0;
    background:red;
    width: 100%;
}
</style>
